<template>
  <div id="app">
    <HomeComponent v-if="currentComponent === 'home'" @switch-to-register="switchToRegister" @switch-to-login="switchToLogin" @switch-to-transaction="switchToTransaction"/>
    <login v-if="currentComponent === 'login'" @switch-to-register="switchToRegister" @switch-to-transaction="switchToTransaction"/>
    <register v-if="currentComponent === 'register'" @switch-to-login="switchToLogin"/>
    <transaction v-if="currentComponent === 'transaction'" />
    <NavigationBar :userLoggedIn="userLoggedIn" :username="username" @logout="handleLogout" />
  </div>
</template>

<script>
import LoginComponent from './views/LoginComponent/LoginComponent.vue'
import RegisterComponent from './views/RegisterComponent/RegisterComponent.vue'
import TransactionComponent from './views/TransactionComponent/TransactionComponent.vue'
import HomeComponent from './views/HomePage.vue'

export default {
  data () {
    return {
      currentComponent: 'home' // 初始化时默认为 HomeComponent
    }
  },
  components: {
    login: LoginComponent,
    register: RegisterComponent,
    transaction: TransactionComponent,
    HomeComponent
  },
  methods: {
    switchToRegister () {
      this.currentComponent = 'register' // 切换到 RegisterComponent
    },
    switchToLogin () {
      this.currentComponent = 'login' // 切换到 LoginComponent
    },
    switchToTransaction () {
      this.currentComponent = 'transaction' // 切换到交易获取页面
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
